<template>
    <div class="food-item">
        <router-link :to="{path: '/detail', query: {field:'food', id: data.id}}">
        <div class="img">
            <img class="food-img" :src="data.img" :alt="data.name">
        </div>
        <div class="info">
            <h1 class="title">{{data.name}}</h1>
            <p class="stars">
                <span class="price">￥ {{data.default_price}}/人</span>
            </p>
            <p class="keyword">
                <span class="badge" 
                    v-for="(item, index) of data.keyword"
                    :key="index"
                >
                    {{item}}
                </span>
            </p>
            <p class="others">
                <span class="item">{{data.field}}</span>
                <span class="item">{{data.area}}</span>
            </p>
        </div>
        </router-link>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>